<template>
    <el-dialog title="预约审批流程" :visible="visible" :show-close="false" width="1000px" center>
        <el-descriptions title="预约信息" :column="2" border>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-user"></i>
                    姓名
                </template>
                {{ form.userName }}
            </el-descriptions-item> 
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-location-outline"></i>
                    单位
                </template>
                {{ form.userUnite }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-mobile-phone"></i>
                    联系方式
                </template>
                {{ form.userTel }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-user"></i>
                    预约专家
                </template>
                {{ form.professorName }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-date"></i>
                    预约时间
                </template>
                {{ form.appointmentTime }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-tickets"></i>
                    预约事项
                </template>
                {{ form.appointmentContent }}
            </el-descriptions-item>
        </el-descriptions>

        <!-- 时间线 -->
        <el-timeline style="margin-top: 30px;">
            <el-timeline-item
            v-for="(activity, index) in activities"
            :key="index"
            :timestamp="activity.timestamp"
            :type="activity.type"
            >
            {{activity.content}}
            </el-timeline-item>
        </el-timeline>

        <!-- 操作按钮 -->
        <template #footer>
            <el-button @click="handleCancel">关闭</el-button>
        </template>
    </el-dialog>
</template>

<script>
import { APPOINTMENT_STATUS } from "@/common/constants.js";

export default {
    name: "AppointmentDialog",
    emits: ["handleDetail"],
    props: {
        /**
         * 是否显示对话框
         * @type {Boolean}
         */
        visible: {
            type: Boolean,
            required: true,
        },

        /**
         * 表单数据
         * @type {Function}
         */
        getType: {
        type: Function,
        required: true
        },

        /**
         * 表单数据
         * @type {Object}
         */
        form: {
            type: Object,
            required: true,
        },
    },
    computed: {

        /**
         * 时间线
         * @type {Object}
         */
        activities() {
            const type = this.getType(this.form.status);
            const activities = [];
            activities.push({timestamp: this.form.createTime, content: "发起申请", type});
            if(this.form.status !== APPOINTMENT_STATUS["审核中"]) {
                const result = {};
                result.timestamp = this.form.updateTime;
                result.content = this.form.status === APPOINTMENT_STATUS["成功"] ? "申请成功" : "申请失败";
                result.type = type;
                activities.push(result);
            }
            return activities;
        }
    },
    data() {
        return {
        };
    },
    methods: {
        /**
         * 关闭操作
         * @returns {void}
         */
        handleCancel() {
            this.$emit("handleDetail", {type: "cancel"});
        },
    },
};
</script>

<style lang="scss" scoped></style>